import { request, CResponse, ResponseCode } from '@/api/request'
import { FUNDFLOW_DELETE, FUNDFLOW_LIST, FUNDFLOW_UPDATE } from '@/api/flow'
import { usePagination, useTable, useTableColumn, useTableHeight } from '@/hooks/table'
import type { Flow, FlowSearchOptions } from '@/api/flow/type'
import { Message, Modal } from '@arco-design/web-vue'

export const Status = [
  {
    title: '',
  },
  {
    title: '信息录入',
  },
  {
    title: '媒介已提交',
    description: '信息录入完提交',
  },
  {
    title: '财务已提交',
    description: '财务确认',
  },
  {
    title: '媒介确认',
    description: '给客户在抖音上充值后酶认',
  },
  {
    title: '财务确认',
    description: '财务确认流程结束',
  },
  {
    title: '完成',
  },
]

export enum ViewType {
  table,
  card,
}

export const VIEW_TYPE = [
  {
    label: '表格',
    value: ViewType.table,
  },
  {
    label: '卡片',
    value: ViewType.card,
  },
]

export const useFlow = () => {
  const visible = ref(false)
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const viewType = ref<ViewType>(ViewType.table)

  const columns = useTableColumn([
    {
      title: '客户经理（媒介）',
      dataIndex: 'accountManager',
    },
    {
      title: '实际支付金额',
      dataIndex: 'actualPaymentAmount',
    },
    {
      title: '垫付金额',
      dataIndex: 'advancePaymentAmount',
    },
    {
      title: '客户ID',
      dataIndex: 'customerId',
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
    },
    {
      title: '付款银行',
      dataIndex: 'paymentBank',
    },
    {
      title: '付款截图',
      dataIndex: 'paymentScreenshot',
      render: ({ record }) => (
        <a-image src={import.meta.env.VITE_PHOTO_URL + record.paymentScreenshot} alt="ss" />
      ),
    },
    {
      title: '充值金额',
      dataIndex: 'rechargeAmount',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: ({ record }) => {
        return `${Status[record.status].title}(${Status[record.status]?.description})`
      },
    },
    // {
    //   title: '操作',
    //   slotName: 'actions',
    // },
  ])

  const searchOptions = ref<FlowSearchOptions>({})

  async function doRefresh() {
    const res = await request
      .Post<CResponse>(FUNDFLOW_LIST, {
        ...pagination,
        ...searchOptions.value,
      })
      .then((res: Response) => res.json())
    if (res.code === ResponseCode.SUCCESS) {
      table.handleSuccess(res)
      table.tableHeight.value = await useTableHeight(getCurrentInstance())
    }
  }

  const onSearch = () => {
    pagination.page = 1
    doRefresh()
  }

  const onResearch = () => {
    searchOptions.value = {}
    doRefresh()
  }

  const addFlow = () => {
    visible.value = true
  }

  const deleteItem = (record: Flow) => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除此数据吗？',
      cancelText: '取消',
      okText: '删除',
      onOk: async () => {
        const { code } = await request
          .Delete<Response>(FUNDFLOW_DELETE + record.id, {
            id: record.id,
          })
          .then((res) => res.json())
        if (code === ResponseCode.SUCCESS) {
          Message.success('数据删除成功')
          table.dataList.splice(table.dataList.indexOf(record), 1)
        }
      },
    })
  }

  const updateFlow = async (flow: Flow) => {
    const { code, body } = await request
      .Post<Response>(FUNDFLOW_UPDATE, flow)
      .then((res) => res.json())
    if (code === ResponseCode.SUCCESS && body) {
      onResearch()
    }
  }

  onMounted(doRefresh)

  return {
    table,
    visible,
    viewType,
    columns,
    addFlow,
    onSearch,
    onResearch,
    doRefresh,
    pagination,
    updateFlow,
    deleteItem,
    searchOptions,
  }
}
